el<template>
  <div class="sequenceflow">
    <el-collapse accordion>
      <ConventionalPage v-model:element="element" :bpmnModeler="props.bpmnModeler"></ConventionalPage>
      <el-collapse-item name="flow" class="flow">
        <template #title>
          <el-icon>
            <Share />
          </el-icon>流转配置
        </template>
        <el-form label-width="80px">
          <el-form-item label="流转类型:">
            <el-radio-group v-model="flowType">
              <el-radio-button label="普通" value="normal">
              </el-radio-button>
              <el-radio-button label="条件" value="condition">
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="flowType === 'condition'" label="流转条件:">
            <el-input v-model="flowCondition"></el-input>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <ExecutionListener v-model:element="element" :bpmnModeler="props.bpmnModeler"></ExecutionListener>

    </el-collapse>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import ConventionalPage from './properties/ConventionalPage.vue'
import ExecutionListener from './properties/ExecutionListener.vue'
const element = defineModel("element", {
  default: {
    id: '',
    name: '',
    type: ''
  }
})
const props = defineProps({
  bpmnModeler: Object
})
// const activeName = ref('converntion')
// const flowInfo = ref({
//   flowType: 'normal',
//   flowCondition: ''
// })
const flowType = ref('normal')
const flowCondition = ref('')
watch(element, () => {
  console.log(props.bpmnModeler.get("elementRegistry").get(element.value.id).businessObject.conditionExpression)
  if (props.bpmnModeler.get("elementRegistry").get(element.value.id).businessObject.conditionExpression?.body) {
    flowType.value = 'condition'
    flowCondition.value = props.bpmnModeler.get("elementRegistry").get(element.value.id).businessObject.conditionExpression.body
  } else {
    flowType.value = 'normal'
    flowCondition.value = ''
  }

}, { deep: true })

watch(flowCondition, () => {
  console.log('flowcondition', flowCondition.value)
  const modeling = props.bpmnModeler.get("modeling")
  const moddle = props.bpmnModeler.get("moddle")
  if (flowCondition.value) {
    console.log('body', flowCondition.value)
    const expression = moddle.create("bpmn:FormalExpression", {
      body: flowCondition.value
    })
    const editElement = props.bpmnModeler.get("elementRegistry").get(element.value.id)
    modeling.updateProperties(editElement, {
      conditionExpression: expression
    })
  }
}, { deep: true }
)
</script>

<style lang="less" scoped>
.flow {
  .el-icon {
    margin: 0 10px;
  }

  :deep(.el-collapse-item__header) {
    font-weight: 700;
    background-color: var(--el-color-primary-light-9);
    border-radius: 10px;
  }
}
</style>